<template>
    <div>
        <el-row type="flex" class="row-bg" justify="center" style="background-color: #f5f5f5;">
            <el-col :span="16" style="background-color: white;">
                <div style="margin-top:20px;height:730px;">
                    <div class="crop">
                        <!-- <img src="/img/coverall.png" class="crop" alt="Paper Sculpture Large"> -->
                        <img class="rpic" align="center" :src="music.src+'?param=125y125'">
                    </div>
                    <div style="width:580px;float:left;margin-left:60px;">
                        <h2>单曲-<span>{{music.musicname}}</span></h2>
                        <p style="color:bulr;margin:10px 0px;"><span style="color:#999;">歌手：</span>{{music.songer}}</p>
                        <p style="color:bulr;margin:10px 0px;"><span style="color:#999;">所属专辑：</span>{{music.album}}</p>
                        <div class="btns" style="margin:10px 0px;">
                            <el-button type="primary" icon="el-icon-video-play" @click="play(id)">播放</el-button>
                        </div>
                        <pre v-if="lyric.length!=0">
{{lyric}}
                        </pre>
                        <h3 v-else>纯音乐，请欣赏</h3>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    props:['id'],
    data(){
        return{
            lyric:[],
            music:{
                musicname:'',
                songer:'',
                album:'',
                src:''
            }
        }
    },
    mounted(){
        //获取歌曲歌词
        axios.get("https://autumnfish.cn/lyric?id="+this.id).then(ele=>{
            this.lyric=ele.data.lrc.lyric;
        }).catch(err=>{
            console.log(err);
        }),
        //获取歌曲详细信息
        axios.get("https://autumnfish.cn/song/detail?ids="+this.id).then(ele=>{
            this.music={},
            this.music={
                musicname:ele.data.songs[0].name,
                songer:ele.data.songs[0].ar[0].name,
                src:ele.data.songs[0].al.picUrl,
                album:ele.data.songs[0].al.name
            }
        }).catch(err=>{
            console.log(err);
        })
    },
    methods:{
        //调用方法播放
        play(id){
            this.$store.commit('chang',id)
        }
    }
}
</script>
<style>
    div.crop {
    margin: 0px 40px 0px 60px;
    float: left;
    height: 200px;
    width: 200px;
    overflow: hidden;
    /* position: relative; */
    /* 背景图片 */
    background:url(/img/coverall.png) 237px 914px;
    }
    /* div.crop img {
    margin: -580px 0 0 -143px;
    } */
    .rpic{
        /* 定位 */
        /* position: absolute; */
        /* relative
        top: 38px;
        left: -265px; */
        /* top:58px;
        left:351px; */
        margin: 37px 0px 0px 35px;
        padding: 2px;
        border: 1px solid #cccccc;
        float: left;
        border-radius: 50%;
    }
</style>